<template>
	<view>
		<!-- 分享二维码 -->
		<u-popup :show="fxshow" @close="fxclose" mode="center">
			<view class="mainpadding block erwmbjsty">
				<view class="mainpadding2s radius ffffff" style="width: 428rpx;">
					<view class="erwmtu">
						<image src="../static/image/system/ms.png" mode=""></image>
					</view>
					<view class="margin_top2">
						<view class="ershiba xiaohei nofonweight">套餐名称</view>
						<view class="margin_top1 xiaohui ershil nofonweight">
							详情内容详情内容详情内容详情内容详情内容详情内容详情
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="xiaolan ershil nofonweight">长按识别图中二维码</view>
					<view class="erwim">
						<image src="../static/image/system/kj.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 分享弹框 -->
		<u-popup :show="show" @close="close">
			<view>
				<view class="mainpadding xiahuaxian dingwei">
					<view class="sanshier fonweight xiaohei textcenter" @click="show = true">分享到</view>
					<view class="guandys" @click="close">
						<u-icon name="close"></u-icon>
					</view>
					<view class="mainpadding">
						<view class="flexleft ">
							<view class="margin_right6" @click="fxshow = true">
								<view class="weixin marginauto"></view>
								<view class="xiaohei ershiba nofonweight textcenter margin_top1">微信</view>
							</view>
							<view class="flexleft">
								<view class="">
									<view class="pengyouq marginauto"></view>
									<view class="xiaohei ershiba nofonweight textcenter margin_top1">朋友圈</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 100rpx;">
			<!-- 轮播图 -->
			<view class="dingwei">
				<u-swiper :list="list1" height="290px"></u-swiper>
				<view class="bofang"></view>
				<view class="flexleft icowz">
					<u-icon name="star" size="26" color="#f5f5f5"></u-icon>
					<u-icon name="share-square" size="26" color="#f5f5f5" @click="show = true"></u-icon>
				</view>
			</view>
			<!-- 课程名称 -->
			<view class="mainpadding ffffff">
				<view class="sanshier xiaohei fonweight">XXXXX课程名称课程名称课程名称课程名称课程名称课程名称课程名称</view>
			</view>
			<!-- 课程内容 -->
			<view class="mainpadding ffffff margin_top1">
				<view class="sanshier xiaohei fonweight">场地设施</view>
				<view class="flexbetween margin_top1">
					<view class="ershiba xiaohui nofonweight">学院年龄段：10-15岁</view>
					<view class="ershiba xiaohui nofonweight">上课形式：线上</view>
				</view>
				<view class="ershiba xiaohui nofonweight margin_top1">开班条件：开班条件内容开班条件内容开班条件内容</view>
				<view class="ershiba xiaohui nofonweight margin_top1">上课要求：上课要求内容上课要求内容上课要求内容</view>
			</view>
			<!-- 适用校区 -->
			<view class="mainpadding ffffff margin_top1">
				<view class="sanshier xiaohei fonweight">适用校区</view>
				<view class="titletext xiaohui nofonweight margin_top1">XXX校区名称</view>
				<view class="ershil xiaohui nofonweight margin_top1">开放时间：10:00-18:00</view>
				<view class="flexbetween margin_top2">
					<view class="">
						<view class="flexleft">
							<view class="dizhilv margin_right1"></view>
							<view class="xiaohei nofonweight ershiba">河南省郑州市中原区</view>
						</view>
						<view class="xiaohui strongtext nofonweight margin_top1">河南省郑州市中原区河南省郑州市中原区</view>
					</view>
					<view class="">
						<u-icon name="phone-fill" size="20"></u-icon>
						<view class="xiaohui strongtext nofonweight margin_top1">电话</view>
					</view>
				</view>
				<view class="lvbox margin_top2">
					<view class="ershiba nofonweight xiaohei">校区设施</view>
					<view class="flexleft margin_top1">
						<view class="ershil nofonweight xiaohui margin_right3">校区设施名称</view>
						<view class="ershil nofonweight xiaohui margin_right3">校区设施名称</view>
						<view class="ershil nofonweight xiaohui">校区设施名称</view>
					</view>
				</view>
				<view class="lvbox margin_top2">
					<view class="ershiba nofonweight xiaohei">校区服务</view>
					<view class="ershil nofonweight xiaohui margin_right3 margin_top1">校区服务内容校区服务内容校区服务内容校区服务内容</view>
				</view>
			</view>
			<!-- 教练介绍 -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexbetween">
					<view class="titletext xiaohei fonweight">教练介绍</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flexbetween margin_top">
					<view class="changdi">
						<image src="../static/image/system/changdi.png" mode=""></image>
					</view>
					<view class="" style="width: 83%;">
						<view class="titletext xiaohei nofonweight">李木子教练</view>
						<view class="ershil xiaohui nofonweight xiankuan margin_top1">
							教练介绍教练介绍教练介绍教练介绍教练介绍教练介绍教练介绍教练介绍教练介绍教练介绍教...</view>
					</view>
				</view>
			</view>
			<!--推荐课程  -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexbetween">
					<view class="">
						<u-tabs :list="list2" lineColor="#1BA95B" :activeStyle="{
							    color: '#333333',
							    fontWeight: 'bold',
							    transform: 'scale(1.05)'
							}" :inactiveStyle="{
							            color: '#333333',
										fontWeight: '400',
							            transform: 'scale(1)'
							        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="xiahuaxian margin_top" v-for="item in 3">
					<view class="flexbetween">
						<view class="shilitu">
							<!-- <image src="../static/image/system/banner1.png" mode=""></image> -->
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">XXX课程名称 </view>
							<view class="strongtext xiaohui nofonweight margin_top2">课程名称内容 </view>
							<view class="flexbetween margin_top2">
								<view class="titletext xiaohong fonweight">¥ 500</view>
								<view class="xiaolvbtn">团购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 推荐机构 -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexbetween">
					<view class="sanshier xiaohei fonweight">推荐机构</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="xiahuaxian margin_top" v-for="item in 3">
					<view class="flexbetween">
						<view class="shilitu">
							<!-- <image src="../static/image/system/banner1.png" mode=""></image> -->
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">XXX课程名称 </view>
							<view class="strongtext xiaohui nofonweight margin_top2">课程名称内容 </view>
							<view class="flexbetween margin_top2">
								<view class="titletext xiaohong fonweight">¥ 500</view>
								<view class="xiaolvbtn">抢购</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 课程详情 -->
			<view class="mainpadding ffffff margin_top1">
				<view class="sanshier xiaohei fonweight">课程详情</view>
				<view class="ershiba xiaohui nofonweight margin_top1">
					课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</view>
				<view class="margin_top2 ">
					<!-- <image class="cgtpiam" src="../static/image/system/banner1.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding ffffff flexbetween">
			<view class="flexleft">
				<view class="bigtext xiaohong fonweight">999
					<text class="xiaohong strongtext fonweight">积分+</text>
				</view>
				<view class="bigtext xiaohong fonweight">20
					<text class="xiaohong strongtext fonweight">元</text>
				</view>
			</view>
			<view class="xiaobtnty" @click="tzqrdd">立即抢购</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: false,
				fxshow: false,
				list2: [{
						name: '推荐课程',
						value: 1,
					},
					{
						name: '团购课程',
						value: 2
					},
					{
						name: '砍价课程',
						value: 3
					},
					{
						name: '秒杀课程',
						value: 3
					}
				],
				type: "",
			}
		},
		methods: {
			// 跳转却确认订单
			tzqrdd(){
				uni.navigateTo({
					url:'/pages_mypage/kechengduihuanddxq'
				})
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hogbtn {
		width: 100%;
		height: 88rpx;
		background: #E11B1B;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolvbtn {
		width: 112rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.changdi {
		width: 100rpx;
		height: 100rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cgtpiam {
		height: 360rpx;
		width: 100%;
		border-radius: 16rpx;
	}

	.lvbox {
		padding: 24rpx 20rpx;
		background: #EFFFF6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	page {
		background: #F9F9F9;
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}
</style>